<script setup>
import {IconDelete, IconEdit, IconSearch} from "@arco-design/web-vue/es/icon";
import {onMounted, ref} from 'vue'
import apiAll from "@/api/apiAll.js";
import AddDrawer from './add.vue'
import editDrawer from './edit.vue'
import editJksDrawer from './editJks.vue'
import {Notification} from "@arco-design/web-vue";
import {tab_ssl_list} from "@/utils/tableColumn.js";

const columns = ref(tab_ssl_list);
const loading = ref(true)
const data = ref([])
const param = ref({
  page: 1,
  size: 10,
  name: '',
  total: 0
})
const AddDrawerRef = ref()
const editDrawerRef = ref()
const editJksDrawerRef = ref()

const loadData = () => {
  loading.value = true
  apiAll.sslApi.list(param.value).then(res => {
    data.value = res.data
    param.value.total=res.total
  }).finally(() => {
    setTimeout(() => {
      loading.value = false
    }, 300)
  })
}
const add = () => {
  AddDrawerRef.value.show()
}
const getSsl=()=>{
  window.open('/证书.md')
}
const showEdit = (name, type) => {
  if ('openssl' === type)
    editDrawerRef.value.show(name)
  else
    editJksDrawerRef.value.show(name)
}
const del = (name) => {
  apiAll.sslApi.deleteByName(name).then(res => {
    Notification.success('删除成功')
    loadData()
  })
}


onMounted(() => {
  loadData()
})
const changePage = (number) => {
  param.value.page = number
  loadData()
}
const changePageSize = (size) => {
  param.value.size = size
  loadData()
}
</script>

<template>
  <div class="flex-column">
    <div class="flex-row" style="margin-bottom: 15px">
      <a-button @click="add" type="primary">添加证书</a-button>
      <a-button @click="getSsl" type="text" style="margin-left: 10px">如何签发、获取证书？</a-button>
      <a-input :style="{width:'250px',marginLeft:'20px'}" v-model="param.name" placeholder="要搜索的名称" allow-clear/>
      <a-button type="primary" @click="loadData">
        <template #icon>
          <icon-search/>
        </template>
        <template #default>搜索</template>
      </a-button>
    </div>

    <a-table :columns="columns" :data="data" :loading="loading" :pagination="false">
      <template #action="{ rowIndex, record }">
        <div class="flex-row">
          <a-button type="primary" size="mini" @click="showEdit(record.name,record.type)">
            <template #icon>
              <icon-edit/>
            </template>
            <template #default>编辑</template>
          </a-button>
          <a-popconfirm content="确认要删除该证书？" @ok="del(record.name)">
            <a-button type="primary" status="danger" size="mini" style="margin-left: 10px">
              <template #icon>
                <icon-delete/>
              </template>
              <template #default>删除</template>
            </a-button>
          </a-popconfirm>
        </div>
      </template>
    </a-table>
    <a-pagination @change="changePage" @page-size-change="changePageSize" :total="param.total" show-total show-jumper
                  style="margin-top: 15px"  show-page-size/>
    <AddDrawer ref="AddDrawerRef" @success="loadData"/>
    <editDrawer ref="editDrawerRef" @success="loadData"/>
    <editJksDrawer ref="editJksDrawerRef" @success="loadData"/>
  </div>
</template>

<style scoped>

</style>